<template>
  <div>
    <h1>留言板</h1>
    <p>
      <input type="text" placeholder="请输入昵称" v-model="nickname"/>
    </p>
    <p>
      <textarea
        name=""
        id=""
        cols="30"
        rows="10"
        placeholder="请输入留言"
        v-model="message"
      ></textarea>
    </p>
    <button @click="submit">提交</button>
 
    <List :mess="mess" @deleteMess="deleteMess"/>
  </div>
</template>

<script>
import data from "./mock";
import List from './components/List.vue'
export default {
  data() {
    return {
      mess: data,
      nickname: '',
      message: '',
    };
  },
  methods: {
    submit() {
      // 获取添加的数据
      const data = {
        id: new Date().getTime().toString(),
        message: this.message,
        datetime: new Date().toLocaleString(),
        nickname: this.nickname,
      }

      this.mess.unshift(data)
      this.message = ''
      this.nickname = ''
    },
    deleteMess(id) {
      this.mess = this.mess.filter(item => item.id !== id)
    }
  },
  components: {
    List
  }
};
</script>
